<template>
  <div class="singer-home">
    <van-nav-bar
      title="歌手信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <img :src="singer.singer_pic" alt="">
    <!-- 标签页 -->
    <van-tabs v-model="active">
        <van-tab title="百科">
            <SingerIntro :singerId="id"/>
        </van-tab>
        <van-tab title="歌曲">
            <SingerSong :singerId="id"/>
        </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入两个标签页对应的子组件
import SingerIntro from "./components/SingerIntro.vue";
import SingerSong from "./components/SingerSong.vue";

export default{
    data() {
        return {
            //标签页的当前激活页，是标签页tab的默认用法
            active: 0,
            //从HomeSinger.vue中跳转过来，通过路由获取id，也就是歌手的id
            id: this.$route.params.mid, 
            singer:{}
        };
    },
    created(){
        //获取到状态管理中对象的数据
        this.singer = this.$store.state.singer

    },
    methods: {
        onClickLeft() {
            //如果历史记录大于1，那么返回到上一层，如果历史记录小于等于1，返回到根路由
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
        },
    },
    components: {
        SingerIntro,
        SingerSong
    },
};
</script>
<style scoped>
</style>
